<template>
	<view class="topContains">
		<view class="bg-white px-3 py-4 d-flex" v-for="(item,index) in msgList" :key="index" @click="tomessageList(item)">
			<view class="bg-size">
				<text class="iconfont font-15 colorfff" :class="item.icon"></text>
				<u-badge bgColor="#FC6E03" max="99" absolute :value="item.numdge" :offset="[-4,-6]"></u-badge>
			</view>
			<view class="width100">
				<view class="d-flex align-start justify-space-between ">
					<text class="font-14 color000">{{item.title}}</text>
					<text class="font-12 color666">{{item.time}}</text>
				</view>
				<view class="font-12 color999 pt-1">
					{{item.name}}
				</view>
			</view>
		</view>
		<u-loadmore 
			loadmoreText="已经到底了"
			line
		/>
	</view>
</template>

<script>
	export default {
	  data() {
	    return {
			msgList:[
			  {
				  icon:'icon-tongzhi',
				  numdge:'4',
				  title:'系统通知',
				  time:'2小时前',
				  name:'卫浴师傅看过来!性价比超高的玻璃胶',
			  },  {
				  icon:'icon-dingdan',
				  numdge:'5',
				  title:'订单消息',
				  time:'1小时前',
				  name:'邀请报价提醒',
			  },
			  {
				  icon:'icon-yichang',
				  numdge:'',
				  title:'异常通知',
				  time:'',
				  name:'暂无新消息',
			  },{
				  icon:'icon-zaixianliuyan',
				  numdge:'',
				  title:'在线留言',
				  time:'',
				  name:'暂无新消息',
			  },
			]
	    };
	  },
	  methods: {
		tomessageList(item){
			uni.navigateTo({
			  url: '/pages/home/message/itemList?title='+item.title
			})
		},
	  }
	};
</script>

<style lang="scss" scoped>
	.topContains{
		.bg-white{
			border-top: 1rpx solid #f2f2f2;
			border-bottom: 1rpx solid #f2f2f2;
			gap: 20rpx;
		}
		.bg-size{
			position: relative;
			background-color: $u-primary;
			border-radius: 8rpx;
			padding: 12rpx 24rpx;
			display: inline-block;
		}
		.width100{
			width: 100%;
		}
	}
</style>